<template>
  <div class="moban-wrap">
    <div class="moban">
      <div class="moban-title flex">
        <!-- 青岛一家有限公司 -->
        <div style="width: 640px; height: 100%; display: flex; align-items: center" class="line1">
          {{
            personalInformation.enterpriseName ||
            companyInformation.enterpriseFullName ||
            ""
          }}
        </div>
        <div class="moban-btn" @click="enterShop()" v-if="dianpuChage == 1">
          进入店铺
        </div>
      </div>
      <div class="moban-span" v-if="companyInformation.affiliationIndustry ||
        companyInformation.companySize
        ">
        <span>
          <!-- 互联网 -->

          {{ companyInformation.affiliationIndustry || "" }}
        </span>
        <span>
          <!-- 20-50人 -->
          {{
            companyInformation.companySize
            ? "·" + companyInformation.companySize
            : ""
          }}
        </span>
      </div>
      <cardCarousel v-if="carouselList.length > 0" :carouselList="carouselList" :showNum="5" style="margin-top: 12px">
      </cardCarousel>
      <div class="moban-main">
        <div class="moban-left">
          <div class="moban-tab">
            <div class="moban-tab-title">
              <div :class="activeTab == 0 ? 'active' : ''" @click="selectTab(0)">
                公司简介
              </div>
              <div :class="activeTab == 1 ? 'active' : ''" @click="selectTab(1)">
                公司环境
              </div>
              <div :class="activeTab == 2 ? 'active' : ''" @click="selectTab(2)">
                帮友圈
              </div>
            </div>
          </div>
          <div v-show="activeTab == 0">
            <div class="moban-tab-content" v-if="companyProfileData.companyIntroduction ||
              companyInformation.shopIntroduce ||
              companyInformation.storeIntroduction
              ">
              <pack-up-text :text="companyProfileData.companyIntroduction ||
                companyInformation.shopIntroduce ||
                companyInformation.storeIntroduction ||
                ''
                " :col="3"></pack-up-text>
            </div>
            <div v-if="companyProfileData == '' &&
              companyInformation == '' &&
              this.dianpuChage == 1
              " class="none">
              <div style="color: #333; text-align: center">
                该企业暂未填写公司简介
              </div>
            </div>
            <div v-if="dianpuChage == 2">
              <div class="moban-sub-title">
                <strong>工商信息</strong>
              </div>

              <div class="moban-flex">
                <div class="flex-4">
                  <div class="flex flex-direction">
                    <div class="moban-label">企业名称：</div>
                    <div class="moban-value">
                      <!-- 青岛一家有限公司 -->
                      {{ businessCirclesData.name }}
                    </div>
                    <div class="moban-label" style="marign-top: 60px">
                      企业类型：
                    </div>
                    <div class="moban-value">
                      {{ businessCirclesData.econKind }}
                    </div>
                  </div>
                </div>
                <div class="flex-3">
                  <div class="flex flex-direction">
                    <div class="moban-label">法定代表人：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.operName }}
                    </div>
                    <div class="moban-label" style="marign-top: 60px">
                      经营状态：
                    </div>
                    <div class="moban-value">
                      {{ businessCirclesData.status }}
                    </div>
                  </div>
                </div>

                <div class="flex-2">
                  <div class="flex flex-direction">
                    <div class="moban-label">成立时间：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.startDate }}
                    </div>
                    <div class="moban-label" style="marign-top: 60px">
                      注册资本：
                    </div>
                    <div class="moban-value">
                      {{ businessCirclesData.registCapi }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="moban-content-wrap">
                <collapse-transition>
                  <div v-if="showMoreState" class="moban-content">
                    <div class="moban-label">所属行业：</div>
                    <div class="moban-value">
                      {{ qyxz(businessCirclesData.entType || 1) }}
                    </div>
                    <div class="moban-label">所属地区：</div>
                    <div class="moban-value" v-if="businessCirclesData.area">
                      {{ businessCirclesData.area.province }}
                    </div>
                    <div class="moban-label">统一社会信用代码：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.creditCode }}
                    </div>
                    <div class="moban-label">工商注册号：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.no || "" }}
                    </div>
                    <div class="moban-label">经营期限：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.teamEnd || "-" }}
                    </div>
                    <div class="moban-label">核准日期：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.checkDate }}
                    </div>
                    <div class="moban-label">登记状态：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.status }}
                    </div>
                    <div class="moban-label">注册地址：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.address }}
                    </div>
                    <div class="moban-label">经营范围：</div>
                    <div class="moban-value">
                      {{ businessCirclesData.scope }}
                    </div>
                  </div>
                </collapse-transition>
              </div>
              <div class="view-more" @click.stop="showMore">
                {{ showMoreState ? "收起" : "查看更多信息" }}
                <i :class="'el-icon-arrow-' + (showMoreState ? 'up' : 'down')"></i>
              </div>
            </div>

            <div class="moban-sub-title">
              <strong>公司地址</strong>
            </div>
            <div class="moban-value">
              {{
                companyInformation.officeAddress || companyInformation.address || companyInformation.shopAddress
              }}
            </div>
            <div id="containepic-wrap" style="position: relative; margin-top: 24px">
              <div id="containepic" class="wrapper moban-area"></div>
              <!-- <div
                id="custom-control"
                @click="resetPosition"
                style="
                  border-radius: 8px;
                  position: absolute;
                  bottom: 20px;
                  right: 20px;
                  background-color: #fff;
                  padding: 4px;
                  cursor: pointer;
                  color: #333;
                "
              >
                <img
                  src="@/assets/v3/areacenter.png"
                  alt=""
                  style="height: auto; width: 32px"
                />
              </div> -->
            </div>
          </div>
          <div v-show="activeTab == 1">
            <div class="company-list" v-if="companyInformationList.length > 0">
              <img class="company-img" v-for="(i, j) in companyInformationList" @click="HJViewImage(j)" :key="j"
                :src="i.environmentalImages" mode="aspectFill" />

              <div style="height: 120px"></div>
            </div>
            <div v-else><el-empty description="暂无数据"></el-empty></div>
          </div>
          <div v-show="activeTab == 2">
            <div v-show="Recommend.length" style="margin-bottom: 6px">
              <friend-item v-for="item in Recommend" :key="item.id" :wrapWidth="786" types="3" :item="item"
                @reData="getFriends">
              </friend-item>

              <div class="flex_center">
                <el-pagination :page-size="pageSize" :current-page="pageNo" @current-change="handlerCurrentChange2"
                  layout="prev, pager, next" :total="RecommendCount">
                </el-pagination>
              </div>
            </div>
            <el-empty v-show="!Recommend.length" description="还没有发布帮友圈呢">
            </el-empty>
          </div>
        </div>
      </div>
    </div>
    <div class="moban-right">
      <div style="
          border: 1px solid #dcdcdc;
          padding-right: 20px;
          padding-left: 20px;
          box-sizing: border-content;
          border-radius: 8px 8px 8px 8px;
        ">
        <div class="moban-operate">
          <div class="moban-operate-item" @click.stop="collect(companyInformation)">
            <img :src="personalInformation.whetherCollection == 1
              ? 'https://pic.bangbangtongcheng.com/static/ysc.png'
              : require('@/assets/shou2.png')
              " alt="" />
            <div class="moban-operate-label">
              {{
                personalInformation.whetherCollection == 1 ? "已关注" : "关注"
              }}
            </div>
          </div>
          <div class="moban-operate-item" @click.stop="shield">
            <img src="@/assets/v3/resume4.png" alt="" />
            <div class="moban-operate-label">屏蔽</div>
          </div>
        </div>
        <div class="moban-sub-title" style="margin-bottom: 20px">
          <strong>联系人</strong>
        </div>
        <div class="moban-user">
          <div class="user-left" @click.stop="agentDetailNew(personalInformation)">
            <img :src="personalInformation.image || defaultAvatar" alt="" />
            <div class="user-tag">
              <!-- 商家 -->
              {{
                personalInformation.isShop == 1
                ? "商家"
                : personalInformation.isAgent == 1
                  ? "经纪人"
                  : personalInformation.enterpriseRecruitmentStatus == 1
                    ? "公司"
                    : "个人"
              }}
            </div>
          </div>
          <div class="user-right">
            <div class="user-name" @click.stop="agentDetailNew(personalInformation)">
              {{ personalInformation.nikeName }}
            </div>
            <div class="user-company line1" style="width: 240px" @click.stop="userfy(personalInformation)">
              {{ personalInformation.enterpriseName }}
            </div>
          </div>
        </div>

        <div class="but">
          <div class="but_2" @click="chat">
            <img src="@/assets/weixin_b.png" alt />
            <p>在线聊天</p>
          </div>
          <div class="but_1" @click="mouseoverPhone" v-if="companyInformation.storeContactNumber">
            <img src="@/assets/dianhua_lan.png" alt />

            <p>
              {{
                isShowPhone ? companyInformation.storeContactNumber : "拨打电话"
              }}
            </p>
          </div>
        </div>
      </div>
      <div style="
          margin-top: 20px;
          padding-right: 20px;
          padding-bottom: 20px;
          border: 1px solid #dcdcdc;
          padding-left: 20px;
          box-sizing: border-content;
          border-radius: 8px 8px 8px 8px;
        ">
        <div class="moban-sub-title" style="margin-top: 20px">
          <strong>在招职位:{{ RecruitmentPositionCount }}个</strong>
        </div>
        <div style="cursor: pointer; user-select: none" @click="openUrlb('/invite/invitedetail', { id: item.id })"
          v-for="(item, index) in RecruitmentPosition" :key="index">
          <div class="invite-title line1" style="margin-top: 20px">
            <tag-view :item="item"></tag-view>{{ item.title }}
          </div>
          <div class="tag-list line1" v-if="item.fringeBenefits">
            <div class="tag-item" :key="'item' + index2" v-for="(item2, index2) in item.fringeBenefits.split(',')">
              {{ item2 }}
            </div>
          </div>
          <div class="moban-salary">
            <template v-if="item.recruitmentType == 1">
              <span>
                {{ item.salaryRange == "面议" ? "面议" : item.salaryRange + "元" }}

              </span>
            </template>
            <template v-else>
              <span>
                {{ item.salaryRange.split(",").join("") }}
              </span>
              <span class="invite-type" style="font-size: 18px;font-weight: 400;color: #333333;">
                <!-- 日结 -->
                {{ item.settlementMethod }}
              </span>
            </template>


          </div>
          <div class="invite-user-mark">
            <div class="marks">
              <!-- 软件工程师 -->
              {{ item.positionCategory }}
              <div class="marks-seperate"></div>
            </div>
            <div class="marks" v-if="item.educationalRequirements">
              <!-- 本科 -->
              {{ item.educationalRequirements.split("/").join("/") }}
              <div class="marks-seperate"></div>
            </div>
            <div class="marks" v-if="item.yearsService">
              <!-- 3-5年 -->
              {{ item.yearsService }}
              <div class="marks-seperate"></div>
            </div>
          </div>
          <div class="seperate pt">
          </div>
        </div>

        <div v-if="RecruitmentPosition.length == 0">
          <el-empty description="暂无数据"></el-empty>
        </div>
        <div class="fenye" style="margin-bottom: 24px">
          <el-pagination :page-size="pageSize" :current-page="pageNo" @current-change="handlerCurrentChange"
            layout="prev, pager, next" :total="RecruitmentPositionCount">
          </el-pagination>
        </div>
      </div>
    </div>
    <masks ref="binds_shield" :data="personalInformation" :data2="companyInformation"></masks>
    <chat ref="chats"></chat>
  </div>
</template>

<script>
import packUpText from "@/views/index/comp/packUpText.vue";
import collapseTransition from "@/utils/collapse-transition";
import cardCarousel from "./cardCarousel.vue";
import masks from "./mask.vue";
import friendItem from "@/views/index/comp/bbcz-friend-circle-item.vue";
import chat from "@/components/chat";
import axios from 'axios'

export default {
  components: {
    packUpText,
    collapseTransition,
    cardCarousel,
    masks,
    friendItem,
    chat,
  },
  computed: {},
  data() {
    return {
      showMoreState: false,
      realHeight: 0,
      item: {},
      list: [
        {
          id: 0,
          value: "双休",
        },
        {
          id: 1,
          value: "房补",
        },
      ],
      activeTab: 0,
      marks: ["软件工程师", "本科", "3-5年"],
      carouselList: [],
      swiperVideo: [],
      swiperList: [],
      user: {},

      personalInformation: {}, //个人信息
      companyInformation: {}, //公司信息
      companyInformationList: [], //公司环境
      companyProfileData: {}, //公司介绍
      businessCirclesData: {}, //工单信息
      dianpuChage: 0, // 判断是否有店铺1,公司2
      pageNo: 1,
      pageSize: 3,

      pageNo2: 1,
      pageSize2: 3,

      RecruitmentPosition: [], //在招职位
      RecruitmentPositionCount: 0,
      isShowPhone: false,
      Recommend: [],
      RecommendCount: 0,
    };
  },
  methods: {
    async enterShop() {
      if (this.personalInformation.businessType == 1) {
        if (this.companyInformation.shopType == 2) {
          this.userfy({ id: this.$route.query.userId })

        } else {
          this.openUrlb("/index/ShopDetails", {
            id: this.companyInformation.id,
          });
        }
      } else {
        if (
          this.companyInformation.storeType == 1 ||
          this.companyInformation.storeType == 2
        ) {
          this.openUrlb("/index/newDealerDetails", {
            id: this.companyInformation.id,
          });
        } else {
          this.openUrlb("/index/ownerServiceDetails", {
            id: this.companyInformation.id,
          });
        }
      }
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
      } else {
        this.loginstate = false;
      }
    },
    shield() {
      // 屏蔽
      if (!localStorage.getItem("userInfo")) {
        this.myErrorMessage("请先登录!");
        return;
      }
      if (this.personalInformation.id == this.user.id) {
        this.myErrorMessage("不可屏蔽自己!");
        return;
      }
      // this.$refs.mask.open("invite2");

      this.$refs.binds_shield.open("invite6");
    },
    collect(info) {
      this.checkLogin((user) => {
        if (this.collectLoading) {
          return false
        }
        this.collectLoading = true
        var ids = ''
        var businessType = this.personalInformation.businessType

        if (this.personalInformation.followCollections && this.personalInformation.followCollections.id) {
          var param = {
            ids: this.personalInformation.followCollections.id

          }
        } else {
          var param = {
            collectorId: user.id,
            collectionType: "9",
            relationId: info.id,
            id:
              info.followCollections &&
                info.followCollections.id
                ? info.followCollections.id
                : "",
            businessType: businessType == '1' ? 1 : businessType == '2' ? 2 : 4
          }
        }


        this.$postHttp('/api/mobile/public/favoriteFollowOrCancelFavoriteFollow', param).then(res => {
          if (res.code == 200) {

            this.$getHttp("/api/mobile/public/getCompanyInformationByUserId", {
              userId: this.uid,
              collectorId: this.user.id || ''
            }).then((res2) => {
              // 获取个人的信息
              this.mySuccessMessage(res.msg)
              this.personalInformation = res2.userCompanyInformation;
              this.collectLoading = false

            })
          } else {
            this.collectLoading = false

          }
        })
      })


      // 收藏
    },
    HJViewImage(index) {
      //预览
      this.$hevueImgPreview({
        multiple: true,
        nowImgIndex: index,
        imgList: this.companyInformationList.map(
          (item) => item.environmentalImages
        ),
      });
    },
    selectTab(i) {
      this.activeTab = i;
      if (i == 2) {
        this.getFriends();
      }
      if (i == 1) {
        // 公司环境
        this.GSpicturesHQ();
      }
    },
    showMore() {
      this.showMoreState = !this.showMoreState;
    },
    chat() {
      this.chatzc(
        this.companyInformation.userId || this.companyInformation.user_id,
        this.personalInformation.id
      );
    },
    mouseoverPhone() {
      this.checkLogin(() => {
        this.isShowPhone = !this.isShowPhone;
        // this.insertCallRecord({
        //   businessType: this.personalInformation.businessType,
        //   userId: this.companyInformation.id,
        //   phone: this.companyInformation.storeContactNumber,
        //   callType: 2
        // });
      });
    },

    getFriends() {
      let that = this;
      let data = {};
      if (
        this.personalInformation.businessType == "0" &&
        this.personalInformation.enterpriseRecruitmentStatus == 1
      ) {
        data = {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          enterpriseId: this.companyInformation.userId,
          userId: this.user.id || "",
          businessType: this.personalInformation.businessType,
        };
      } else {
        data = {
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          storeId: this.companyInformation.id,
          userId: this.user.id || "",
          businessType: this.personalInformation.businessType,
        };
      }
      this.$getHttp(
        "/api/mobile/vehicleOwner/getHelpingFriendsCircle",
        data
      ).then((res) => {
        res.helpingFriendsCircle.pageList.forEach((item) => {
          item.chage = 0;
          item.picture = this.manageImg(item.picture);
          item.imageList = this.manageImg(item.picture);
          item.video = this.manageImg(item.video);
          console.log("=====>", "item.imageListitem.imageList", item.imageList);
        });
        this.Recommend = res.helpingFriendsCircle.pageList;
        this.RecommendCount = res.helpingFriendsCircle.pageCount;
      });
    },
    getRecruitmentPosition() {
      //在招职位
      this.$getHttp("/api/mobile/personnelOwner/getRecruitmentPosition", {
        userId: this.personalInformation.id,
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }).then((res) => {
        this.RecruitmentPosition = res.recruitment.pageList;
        this.RecruitmentPositionCount = res.recruitment.pageCount;
      });
    },
    getdynamicList2() {
      this.$getHttp("/mob/user/getArticleInfo", {
        pageSize: "999",
        pageNo: "1",
        businessType: 4,
        shopId: this.companyInformation.id,
        type: "2",
      }).then((res) => {
        res.list.forEach((v) => {
          if (v.remarks == 2) {
            this.swiperVideo = v.image;
          } else {
            this.carouselList.push({
              ...v,
              id: v.id,
              image: v.image,
            });
          }
        });
      });
    },


    resetPosition() {
      var center = new qq.maps.LatLng(
        this.companyInformation.latitude,
        this.companyInformation.longitude
      );

      this.map.panTo(center);
    },
    // 获取定位
    initMap() {
      setTimeout(async () => {
        var that = this;
        var html = "";
        if (!that.companyInformation.latitude) return false
        var center = new qq.maps.LatLng(
          // that.companyInformation.latitude,
          // that.companyInformation.longitude
          // 36.779572,
          // 119.974598
          that.companyInformation.latitude,
          that.companyInformation.longitude
        );

        var map = new qq.maps.Map(document.getElementById("containepic"), {
          center: center,
          zoom: 13,
          disableDefaultUI: true,
        });
        this.map = map;
        var marker = new qq.maps.Marker({
          position: center,
          map: map,
        });
        //that.markersArray.push(marker);
        var infoWin = new qq.maps.InfoWindow({
          map: map,
        });
        html = `<div id="popup" style="text-align:left;white-space:nowrap;margin:10px;color:#333333;font-size:16px;">工作地点：${that.companyInformation.officeAddress ||
          that.companyInformation.address || that.companyInformation.shopAddress
          }</div>`;

        infoWin.close(); //先关闭已打开信息窗口
        infoWin.open();
        infoWin.setContent(html);
        infoWin.setPosition(center);

        // 获取标记的点击事件;
        qq.maps.event.addListener(marker, "click", function () {
          infoWin.close(); //先关闭已打开信息窗口

          infoWin.open(); //再打开 并赋给新的值
          infoWin.setContent(html);
          infoWin.setPosition(center);
        });

        let data = {
          key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
          output: "jsonp",
        };

        function CustomZoomControl(controlDiv, map) {
          controlDiv.style.margin = "0 20px 20px 0";
          controlDiv.style.backgroundColor = "#FFFFFF";
          controlDiv.style.borderRadius = "8px";
          controlDiv.style.padding = "4px";
          controlDiv.style.backgroundColor = "#FFFFFF";
          controlDiv.style.color = "#333";
          controlDiv.style.cursor = "pointer";

          let img = document.createElement("img");
          img.src = require("@/assets/v3/areacenter.png");
          img.style.height = "auto";
          img.style.width = "32px";
          controlDiv.appendChild(img);
          controlDiv.index = 1; //设置在当前布局中的位置

          function update() {
            map.panTo(center);
            // var currentZoom = map.getZoom();
            // controlDiv.innerHTML = "地图缩放级别：" + currentZoom;
            // qq.maps.event.trigger(controlDiv, "resize");
          }

          update();
          //添加dom监听事件  一旦zoom的缩放级别放生变化则出发update函数
          qq.maps.event.addDomListener(controlDiv, "click", update);
        }

        var customZoomDiv = document.createElement("div");
        //获取控件接口设置控件
        var customZoomControl = new CustomZoomControl(customZoomDiv, map);
        //将控件添加到controls栈变量并将其设置在顶部位置
        map.controls[qq.maps.ControlPosition.BOTTOM_RIGHT].push(customZoomDiv);
      }, 200);
    },

    getbusinessCircles() {
      //获取工商信息
      axios.get(this.$baseURL + '/api/mobile/personnelOwner/getBusinessAdministration', {
        params: {
          enterpriseCertificationId: this.companyInformation.id,
          keyword: this.companyInformation.unifiedSocialCreditCode,
        }

      }).then((res) => {
        res = res.data
        this.businessCirclesData = res.businessAdministration || {};
      });

    },
    handlerCurrentChange(e) {
      this.pageNo = e;
      this.getRecruitmentPosition();
    },
    handlerCurrentChange2(e) {
      this.pageNo = e;
      this.getFriends();
    },
    async getData(flag) {
      await this.$getHttp("/api/mobile/public/getCompanyInformationByUserId", {
        userId: this.uid,
        collectorId: this.user.id || ''
      }).then((res) => {
        // 获取个人的信息
        this.personalInformation = res.userCompanyInformation;
        // 获取公司信息
        if (res.userCompanyInformation.businessType == 2) {
          this.companyInformation = res.userCompanyInformation.distributorDto || {};
        } else if (res.userCompanyInformation.businessType == 1) {
          this.companyInformation = res.userCompanyInformation.shopInfo || {};
        } else {
          this.companyInformation =
            res.userCompanyInformation.enterpriseCertification || {};
        }

        // 地址
        if (this.companyInformation.latitude) {
          this.initMap();
        }
        // 判断是店铺还是公司
        if (
          res.userCompanyInformation.businessType == 0 ||
          !res.userCompanyInformation.businessType
        ) {
          // 公司
          this.dianpuChage = 2;
          this.getdynamicList2();
          this.getbusinessCircles();
        } else {
          this.dianpuChage = 1;

          this.$getHttp("/mob/user/getArticleInfo", {
            pageNo: 1,
            pageSize: 999,
            businessType: res.userCompanyInformation.businessType || 1,
            shopId: this.companyInformation.id,
            type: 2,
          }).then((res) => {
            res.list.forEach((v) => {
              if (v.remarks == 2) {
                this.swiperVideo = v.image;
              } else {
                this.carouselList.push({
                  id: v.id,
                  image: v.image,
                });
              }
            });
            this.carouselList = res.list;
          });
        }
        // 获取工商信息
        // this.getbusinessCircles();
        // 在招职位
        this.getRecruitmentPosition();
      });
    },
    // 获取公司环境
    GSpicturesHQ() {
      let businessType =
        this.personalInformation.businessType == 0 ||
          !this.personalInformation.businessType
          ? "4"
          : this.personalInformation.businessType;
      this.$getHttp("/api/mobile/public/getCompanyEnvironmentTabulation", {
        businessType: businessType,
        companyId: this.uid,
      }).then((data) => {
        this.companyInformationList = []
        data.companyEnvironmentTabulation.forEach((v) => {
          if (v.auditStatus == 1) {
            this.companyInformationList.push(v);
          }
        });
      });
    },
    // 获取公司介绍
    GSintroduceHQ() {
      let businessType =
        this.personalInformation.businessType == 0 ||
          !this.personalInformation.businessType
          ? "4"
          : this.personalInformation.businessType;
      this.$getHttp("/api/mobile/public/getCompanyIntroductionTabulation", {
        businessType: businessType,
        companyId: this.uid,
      }).then((data) => {
        if (data.companyEnvironmentTabulation.length) {
          this.companyProfileData = data.companyEnvironmentTabulation[0];
        }
      });
    },
    // 获取企业性质
    qyxz(index) {
      if (index == 1) {
        return "社会组织";
      } else if (index == 3) {
        return "中国香港公司";
      } else if (index == 4) {
        return "事业单位";
      } else if (index == 5) {
        return "中国台湾公司";
      } else if (index == 6) {
        return "基金会";
      } else if (index == 7) {
        return "医院";
      } else if (index == 8) {
        return "海外公司";
      } else if (index == 9) {
        return "律师事务所";
      } else if (index == 10) {
        return "学校";
      } else if (index == 11) {
        return "机关单位";
      } else if (index == 0) {
        return "大陆企业";
      } else {
        return "其他";
      }
    },
  },
  async created() {
    this.uid = this.$route.query.userId || 963;
    this.getUser();
    await this.getData();

    this.GSintroduceHQ();
  },
  mounted() { },
};
</script>

<style lang="less" scoped>
.moban-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  color: #333;
}

.moban {
  display: inline-block;
  vertical-align: top;
  width: 793px;
  padding-top: 24px;
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  position: relative;

  .moban-flex {
    display: flex;
  }

  .moban-title {
    height: 40px;
    font-size: 28px;
    font-weight: 500;
    color: #333333;
    align-items: center;

    .moban-btn {
      cursor: pointer;
      width: 102px;
      margin-left: 20px;
      text-align: center;
      height: 35px;
      line-height: 35px;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #64b6a8;
      font-size: 22px;
      font-weight: 400;
      color: #64b6a8;
    }
  }

  .moban-span {
    margin-top: 10px;
    height: 28px;
    font-size: 20px;
    font-weight: 500;
    color: #666666;
    line-height: 28px;

    span {
      margin-right: 14px;
    }
  }

  .moban-main {
    opacity: 1;
    // display: flex;
    padding-top: 48px;

    // position: relative;
    .company-list {
      margin-top: 30px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .company-img {
        max-width: 387px;
        max-height: 180px;
        background: #d9d9d9;
        border-radius: 16px 16px 16px 16px;
        opacity: 1;
        margin-bottom: 20px;
        object-fit: cover;
      }
    }

    .moban-left {
      display: inline-block;
      vertical-align: top;
      width: 793px;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      // border: 1px solid #dcdcdc;
      // padding: 20px 30px;
      box-sizing: border-box;
      min-height: 600px;

      .moban-content-wrap {
        overflow: hidden;
        position: relative;

        .moban-content {
          scrollbar-width: none;
          /* firefox */
          -ms-overflow-style: none;

          /* IE 10+ */
          &::-webkit-scrollbar {
            display: none;
            /* Chrome Safari */
          }
        }
      }

      .moban-tab {
        font-size: 24px;
        font-weight: 500;
        color: #333333;
        line-height: 34px;

        .moban-tab-title {
          display: flex;

          .active {
            color: #64b6a8;
          }

          div {
            margin-right: 100px;
          }
        }
      }

      .moban-tab-content {
        padding-top: 30px;
      }

      .moban-sub-title {
        margin-top: 11px;
        height: 34px;
        font-size: 24px;
        font-weight: 500;
        color: #000000;
        line-height: 34px;

        strong {
          font-weight: 600;
        }
      }

      .moban-flex {
        display: flex;

        .flex-4 {
          flex: 4;
        }

        .flex-3 {
          flex: 3;
        }

        .flex-2 {
          flex: 2;
        }
      }

      .moban-label {
        margin-top: 20px;
        font-weight: 500;
        color: #333333;
      }

      .moban-value {
        margin-top: 10px;
        color: #666666;
        font-weight: 400;
      }

      .view-more {
        padding: 32px 0;
        text-align: center;
        color: #333333;
        background-color: #fff;
        cursor: pointer;
      }

      .moban-area {
        width: 793px;
        height: 322px;
        margin-bottom: 76px;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        overflow: hidden;
      }
    }
  }
}

.moban-right {
  // position: absolute;
  margin: 20px 0;
  top: 20px;
  display: inline-block;
  padding-left: 20px;
  width: 378px;

  .moban-sub-title {
    height: 34px;
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    line-height: 34px;

    strong {}
  }

  .moban-user {
    display: flex;

    .user-left {
      height: 98px;
      position: relative;

      img {
        width: 80px;
        height: 80px;
        background: #d9d9d9;
        opacity: 1;
        border-radius: 50%;
      }

      .user-tag {
        position: absolute;
        bottom: 0;
        transform: translateX(-50%);
        left: 50%;
        width: 60px;
        height: 25px;
        background: #64b6a8;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        color: #ffffff;
        line-height: 25px;
      }
    }

    .user-right {
      flex: 1;
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      height: 98px;

      .user-name {
        flex: 1;
        display: flex;
        align-items: center;
        font-size: 24px;
        font-weight: 400;
        color: #333333;
      }

      .user-company {
        height: 25px;

        font-size: 20px;
        font-weight: 400;
        color: #666666;
        line-height: 25px;
      }
    }
  }

  .moban-operate {
    margin-top: 16px;
    display: flex;

    .moban-operate-item {
      cursor: pointer;
      margin-right: 44px;

      img {
        width: 36px;
        height: 36px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }

      .moban-operate-label {
        text-align: center;
        margin-bottom: 14px;
        margin-top: 4px;
      }
    }

    .moban-operate-item {
      img {}

      .moban-operate-label {}
    }
  }

  .but {
    margin-top: 26px;
    display: flex;
    margin-bottom: 26px;

    div {
      position: relative;
      display: inline-block;
      //width: 153px;
      height: 51px;
      border-radius: 4px;
      overflow: hidden;
      text-align: center;
      line-height: 51px;
      text-indent: 50px;
      color: #fff;
      margin-right: 15px;

      img {
        position: absolute;
        width: 33px;
        height: 33px;
        top: 9px;
        left: 25px;
      }
    }

    p {
      margin-left: 10px;
    }

    .but_1 {
      cursor: pointer;
      padding-right: 20px;
      background: rgba(100, 182, 168, 0.14);
      color: #64b6a8;
    }

    .but_2 {
      cursor: pointer;
      padding-right: 20px;
      background: #64b6a8;
    }
  }

  .invite-title {
    height: 34px;
    font-size: 24px;
    font-weight: 500;
    color: #333333;
    line-height: 34px;
  }

  .tag-list {
    padding-top: 12px;
    padding-bottom: 20px;
    overflow: hidden;
    // display: inline-flex;
    width: 306px;
    position: relative;

    .tag-item {
      // flex-shrink: 0;
      display: inline-block;
      vertical-align: middle;

      margin-right: 10px;
      position: relative;
      position: relative;
      background-color: #fff;
      padding: 0 7px;
      height: 24px;
      line-height: 24px;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #999999;
      font-size: 14px;
      font-weight: 400;
      color: #999999;

      // z-index: -1;
      // .tag-item-text {
      //   z-index: 2;

      // }

      // &::before {
      //   content: '...';
      //   border: 1px solid #333;
      //   position: absolute;
      //   left: 0;
      //   // z-index: -1;
      //   top: 0;
      //   background-color: #ffffff;
      // }
    }
  }

  .moban-salary {
    height: 45px;
    font-size: 30px;
    font-weight: 400;
    color: #e00000;
    line-height: 45px;
  }

  .invite-user-mark {
    margin-top: 4px;
    display: flex;
    align-items: center;

    .marks {
      font-size: 18px;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      justify-content: center;

      &:last-child {
        .marks-seperate {
          display: none;
        }
      }

      .marks-seperate {
        width: 2px;
        height: 25px;
        opacity: 1;
        background-color: #999999;
        margin: 0 10px;
      }
    }
  }
}
</style>
